<template>
  <div class="inn_dialog">
    <Title :title="technology"></Title>
    <div id="expand"></div>
  </div>
</template>

<script>
import * as Echarts from "echarts";
import Title from "@/components/title.vue";
export default {
  components: {
    Title,
  },
  data(){
    return {
      technology:'拓展功能',
      directionName:[],
      directionValue:[],
    }
  },
  methods:{

    //初始化
    echartsInit(){
      // //获取挂载元素，Echarts.init：初始化Echarts
      let chartDom=Echarts.init(document.querySelector("#expand"))
      window.addEventListener('resize', function() {
        chartDom.resize();
      });
      let option  = {
        radar: {
          indicator:this.directionName
        },
        series: [
          {
            name: 'Budget vs spending',
            type: 'radar',
            data: this.directionValue
          }
        ]
      }

      option &&  chartDom.setOption(option)
    },

    getDirection() {
      this.$axios.getDirection({type:2}).then(res => {
        if(res.data.length == 0) return
        this.directionName = []
        this.directionValue = [{value:[]}]
        let arr = []
        res.data.forEach((item,i)=>{
          this.directionName.push({})
          this.directionName[i].name = item.name
          arr.push(1)
        })
        this.directionValue[0].value = arr
        this.echartsInit()
      })
    }

  },
  mounted() {
    this.getDirection()
  }
}
</script>

<style scoped lang="less">
.inn_dialog{
  height: calc( 100% - 2vw);
  #expand {
    height: 100%;
  }
}
</style>